<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06_列表渲染</title>
</head>
<body>
<div id="test">
    <h2>测试: v-for 遍历数组</h2>
    <ul>
        <li v-for="(p,index) in persons" :key="index">
            {{index}} --- {{p.name}} --- {{p.age}}
            <button @click="del(index)">删除</button>
            <button @click="update(index,{name:'Cat',age:'10'})">更新</button>
        </li>
    </ul>
    <h2>测试: v-for 遍历对象</h2>
    <ul>
        <li v-for="(value,key) in persons[1]" :key="key">
            {{value}} --- {{key}}
        </li>

    </ul>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script>
    new Vue({
        el: '#test',
        data: {
            persons: [ // 只是监视了persons的改变，没有监视数组的内部数据的改变
                {name: 'Tom', age: 18},
                {name: 'Jack', age: 16},
                {name: 'Bob', age: 19},
                {name: 'Rose', age: 17},
            ]
        },
        methods: {
            del(index) {
                // 删除persons中指定的index的p
                this.persons.splice(index, 1) // 这里为什么要改变了呢？ 参考文档：https://cn.vuejs.org/v2/guide/list.html#%E6%95%B0%E7%BB%84%E6%9B%B4%E6%96%B0%E6%A3%80%E6%B5%8B
                // 可以理解成vue的数组的splice方法做了两件事： 1 调用原生的数组方法  2 更新视图
            },
            update(index, newP) {
                // console.log("update", index, newP)
                // this.persons[index] = newP; // 并没有改变person本身 只是改变了内部结构 vue不知道 所以没有更新试图
                this.persons.splice(index, 1, newP) // splice可以实现增删改
            }
        }
    })
</script>
</body>
</html>